<template>
	<view class="wp">
		<view class="gift_content">
			<view class="g_userInfo">
				<view class="g_logo"><image :src="info.avatar"></image></view>
				<view class="g_user_date">距佣金发放还有{{info.days}}天（每月1号）</view>
			</view>
			<view class="tipContent self">
				<view class="top">
					<view class="t_title">团队累积销售<text class="g_red">{{info.level.orders}}</text>笔订单<text class="g_purple">（每单返{{info.level.money}}佣金）</text></view>
					<view class="t_look_all" v-show="!isShowSelf" @click="changeSelfShow">团队信息<image src="/static/jiantou1.png"></image></view>
					<view class="t_look_all t_look_close" v-show="isShowSelf" @click="changeSelfShow">团队信息<image src="/static/jiantou1.png"></image></view>
				</view>
				<view class="per_content" v-show="isShowSelf">
					<view class="per_item per_one">
						<view>本月单数</view>
						<view class="per_num">{{info.ower.order}}</view>
					</view>
					<view class="per_item per_two">
						<view>本月佣金</view>
						<view class="per_num">{{info.ower.money}}</view>
					</view>
					<view class="per_item per_three">
						<view>团队单数</view>
						<view class="per_num">{{info.team.order}}</view>
					</view>
					<view class="per_item per_four">
						<view>本月单数</view>
						<view class="per_num">{{info.team.money}}</view>
					</view>
				</view>
				<view class="g_purple text-center" v-show="isShowSelf">下一档位团队达{{info.nextlevel.orders}}单每单可提升至{{info.nextlevel.money}}佣金</view>
			</view>
			<view class="team_total">
				<view class="team_number"><text class="team_tit">团队销量</text>当前直推人员：<text class="team_num">{{total}}人</text></view>
				<uni-search-bar radius="30" bgColor="#ffffff" v-model="keywords" placeholder="搜索你想找的团员" clearButton="auto" cancelButton="none" @confirm="searchMember" />
			</view>
			<view class="member_list">
				<view class="member_item" v-for="(item,index) in list">
					<view class="member_info">
						<image class="mem_logo" :src="item.avatar"></image>
						<view class="member_nickname">
							<view class="clamp">{{item.nickname}}</view>
							<view class="mem_tip">{{item.createtime}}加入</view>
						</view>
						<view class="t_look_all">
							<view class="mem_num">
								<view class="mem_total">团队累积销售<text class="g_red">{{item.level[0]}}</text>笔订单</view>
								<view class="mem_tip">（每单返{{item.level[1]}}佣金）</view>
							</view>
							<!-- <image src="/static/jiantou1.png" @click="changeTeamShow(item.show,index)"></image> -->
						</view>
					</view>
					<view class="tipContent">
						<view class="text-center">下一档位达{{item.nextlevel[0]}}单每单可提升至{{item.nextlevel[1]}}佣金</view>
					</view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-if="isloading" src="/static/business/loading.gif" mode=""></image>
				<view v-if="isempty">到底了~</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowSelf: true,
				info: [],
				page: 0,
				list: [],
				isloading: false,
				isempty: false,
				keywords: '',
				total: 0,
			};
		},
		onLoad() {
			this.getList();
			this.getInfo();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			changeSelfShow(){
				this.isShowSelf = !this.isShowSelf;
			},
			changeTeamShow(status,index){
				this.$set(this.list[index], 'show', !status);
			},
			getInfo(){
				this.$axios('vipsale/info','POST','member').then(res=>{
					if(res.data.code == 200){
						this.info = res.data.data;
					}
				})
			},
			getList(){
				this.page++;
				this.isloading = true;
				this.isempty = false;
				this.$axios('vipsale/getteam','POST','member',{
					page: this.page,
					keywords: this.keywords,
				}).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.total = res.data.data.num;
						this.list = [...this.list,...res.data.data.list];
						this.isempty = res.data.data.list.length <= 0;
					}
				})
			},
			searchMember(){
				this.page = 0;
				this.list = [];
				this.getList();
			}
		}
	}
</script>

<style lang="scss">
.wp{
	background-color: $uni-color-primary;
	border-top: 1rpx solid $uni-color-primary;
}
page{
	background: #FBF8FE;
}
.gift_content{
	background: #FBF8FE;
	border-radius: 32rpx 32rpx 0 0;
	padding: 24rpx;
	margin-top: 60rpx;
	.g_userInfo{
		display: flex;
		// justify-content: center;
		color: $bg-color;
		font-weight: 600;
		margin-top: -75rpx;
		align-items: flex-end;
		.g_logo{
			width: 140rpx;
			height: 140rpx;
			background: #FBF8FE;
			border-radius: 50%;
			padding: 20rpx;
			overflow: hidden;
			margin-left: 30rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.g_user_date{
			margin-bottom: 20rpx;
		}
	}
}
.tipContent {
	margin-top: 12rpx;
	margin-bottom: 20rpx;
    padding: 20rpx;
    position: relative;
    background-color: #F0E1FF;
    border-radius: 10rpx;
	padding-bottom: 18rpx;
	&::before,&::after{
		content: "";
		display: block;
		border-width: 24rpx;
		position: absolute;
		top: -46rpx;
		left: 76rpx;
		border-style: solid dashed dashed solid;
		border-color: transparent transparent #F0E1FF transparent;
		font-size: 0;
		line-height: 0;
	}
	&::after {
		top: -46rpx;
		border-color: transparent transparent #F0E1FF transparent;
	}
}
.g_red{
	color: #FF1620;
	font-weight: 600;
	font-size: 28rpx;
}
.g_purple{
	color: #8615E1;
	font-size: 24rpx;
	font-weight: 400;
}
.t_look_all{
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	image{
		width: 24rpx;
		height: 24rpx;
		transform: rotateZ(90deg);
		margin-left: 10rpx;
	}
}
.t_look_close{
	image{
		transform: rotateZ(270deg);
	}
}
.per_content{
	background: #FFFFFF;
	border-radius: 12rpx;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
	margin-top: 20rpx;
	.per_item{
		width: 48.5%;
		height: 138rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
		display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
		.per_num{
			font-size: 40rpx;
			font-weight: bold;
			margin-top: 6rpx;
		}
	}
	.per_one{
		color: #303EA9;
		background: linear-gradient( 180deg, #D9DFFF 0%, #F2F4FF 100%);
		margin-bottom: 20rpx;
	}
	.per_two{
		color: #B46431;
		background: linear-gradient( 180deg, #FFF0D9 0%, #FDFFF2 100%);
		margin-bottom: 20rpx;
	}
	.per_three{
		color: #5FA930;
		background: linear-gradient( 180deg, #EAFFD9 0%, #F8FFF2 100%);
	}
	.per_four{
		color: #B43D31;
		background: linear-gradient( 180deg, #FFE5D9 0%, #FFF6F2 100%);
	}
}
.self{
	.top{
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-bottom: 20rpx;
		.t_title{
			font-size: 24rpx;
			font-weight: 600;
		}
	}
}
.uni-searchbar{
	padding: 0!important;
}
.team_total{
	.team_number{
		margin-bottom: 20rpx;
		.team_tit{
			font-size: 32rpx;
			font-weight: 600;
			margin-right: 20rpx;
		}
		.team_num{
			font-weight: 600;
		}
	}
}
.member_list{
	margin-top: 20rpx;
	padding-bottom: 60rpx;
	.member_item{
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.member_info{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.mem_logo{
				width: 78rpx;
				height: 78rpx;
				border-radius: 50%;
			}
			.member_nickname{
				padding-left: 20rpx;
				width: calc(100% - 408rpx);
				.clamp{
					font-weight: 600;
				}
			}
			.t_look_all{
				width: 330rpx;
				justify-content: flex-end;
				white-space: nowrap;
			}
			.mem_tip{
				font-size: 24rpx;
				color: #999999;
			}
			.mem_num{
				text-align: right;
				.mem_total{
					font-weight: 600;
					font-size: 24rpx;
				}
			}
		}
		.tipContent{
			background: #F6F6F6;
			margin-top: 26rpx;
			// padding-top: 2rpx;
			padding-top: 18rpx;
			&::before,&::after{
				left: 20rpx;
				top: -32rpx;
				border-width: 18rpx;
				border-color: transparent transparent #F6F6F6 transparent;
			}
			&::after {
				top: -32rpx;
				border-color: transparent transparent #F6F6F6 transparent;
			}
		}
		.text-center{
			font-size: 24rpx;
			color: #999999;
		}
		.per_content{
			.per_item{
				margin-bottom: 0;
			}
		}
	}
}
</style>
